<template>
    <div>
        <el-form
            ref="roleCheckRef"
            :model="formObj"
            label-width="120px"
            :rules="roleRule"
        >
            <!-- 角色权限-->
            <transition class="animate__animated animate__backInUp">
                <div class="role_checkout">
                    <p class="role_checkout_name">角色权限：</p>
                    <el-form-item
                        class="role_checkout_from"
                        prop="roleCheckoutList"
                    >
                        <el-checkbox-group
                            v-model="formObj.roleCheckoutList"
                            class="role_checkout_from_group"
                        >
                            <template v-for="role in checkList">
                                <el-checkbox
                                    :value="String(role.value)"
                                    :label="role.label"
                                />
                            </template>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
            </transition>

            <div v-if="isNeedDefaultUser" class="defaultUser">
                <span>默认用户登录类型:</span>
                <el-form-item prop="defaultUser">
                    <el-select
                        v-model="formObj.defaultUser"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in defaultUserlist"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
const roleCheckRef = ref();

const props = defineProps({
    checkList: {
        required: true,
        default: () => [] as any,
    },
    isNeedDefaultUser: {
        required: true,
        default: () => true,
    },
});
const formObj = ref({
    roleCheckoutList: [] as any,
    defaultUser: "",
});

const roleRule = reactive({
    roleCheckoutList: [
        {
            required: true,
            message: "请选择角色权限",
            trigger: "change",
        },
    ],
    defaultUser: [
        {
            required: props.isNeedDefaultUser,
            message: "请选择默认用户登录类型",
            trigger: "change",
        },
    ],
});

async function roleValidation() {
    const roleValid = await roleCheckRef.value.validate((isValid: boolean) => {
        return isValid;
    });

    return roleValid;
}
watch(
    () => formObj.value.roleCheckoutList,
    (newVal) => {
        if (newVal && props.isNeedDefaultUser) {
            if (
                !formObj.value.roleCheckoutList.includes(
                    String(formObj.value.defaultUser)
                )
            ) {
                formObj.value.defaultUser = "";
            }
        }
    },
    {
        deep: true,
    }
);

const defaultUserlist = computed(() => {
    return props.checkList.filter((item: any) => {
        return formObj.value.roleCheckoutList.includes(String(item.value));
    });
});

defineExpose({ roleValidation, formObj, roleCheckRef });
</script>

<style lang="scss" scoped>
.role_checkout {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    font-size: 14px;
    color: #222222;
    &_name {
        @include textChangeRow;
        max-width: 200px;
        color: #222222;
        padding-bottom: 20px;
    }
    .el-form-item {
        margin-bottom: 0;
    }
    &_from {
        flex: 1;
        &_group {
            flex-wrap: wrap;
            margin-left: 4px;
            flex: 1;
        }
    }

    label {
        margin-bottom: 20px;
        height: 100%;
        line-height: 120%;
    }
}

.defaultUser {
    font-size: 14px;
    color: #222222;
    font-weight: 500;
    display: flex;
    align-items: center;
    span {
        width: 140px;
    }
    .el-form-item {
        margin-bottom: 0;
    }
    .el-select {
        width: 286px;
        height: 32px;
    }
}
:deep(.el-form) {
    .el-form-item__content {
        margin-left: 2px !important;
    }
}
</style>
